// 文件数据源
<template>
  <div class="create-file">
    <div class="header">
      <span>文件数据源</span>
      <el-button type="primary" plain size="small" @click="openUploadDialog">上传文件</el-button>
    </div>
    <div class="grid-content bg-purple">
      <p class="title" style="display:inline-block">名称</p>
      <el-input v-model="saveTaskData.taskname" style="display:inline-block;margin-left:20px;width:200px;"></el-input>
    </div>
    <div class="grid-content bg-purple">
      <p class="title">样例数据</p>
      <el-table :data="tableData" style="width: 100%;margin-bottom:30px;" max-height="400" stripe border>
        <el-table-column v-for="column in columns" :prop="column" :label="column" :key="column" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20">
      <el-col :span="12" v-show="tableData.length!=0">
        <div class="title-group">
          <p class="title">对象配置</p>
          <el-button type="primary" plain size="medium" @click="openAddObjGroupDialog" style="margin-bottom:10px">添加对象组</el-button>
          <div v-for="(obj,index) in objGroupList" class="objGroup" :key="index">
            <div class="title">{{obj.title}}<i class="el-icon-close" @click="deleteObj(obj,index)"></i></div>
            <el-table :data="obj.tableData" style="width: 100%" stripe border>
              <el-table-column v-for="column in obj.columns" :prop="column.prop" :label="column.label" :key="column.prop">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="12" v-show="objGroupList.length!=0">
        <div class="title-group">
          <p class="title">关系配置</p>
          <el-button type="primary" plain size="medium" @click="openAddLinkGroupDialog" style="margin-bottom:10px">添加关系组</el-button>
          <el-table :data="linkTableData.table" style="width: 100%" stripe border>
            <el-table-column prop="obj1" label="对象">
            </el-table-column>
            <el-table-column prop="obj2" label="对象">
            </el-table-column>
            <el-table-column prop="link" label="关系">
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button size="mini" plain type="danger" @click="openDelDialog(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" class="exportPIM" @click="exportfile">导出文件</el-button>
    <el-dialog title="上传文件" :visible.sync="uploadFileVisible">
      <el-form ref="form" :model="uplodForm" label-width="120px" :rules='uploadRules'>
        <el-form-item label="选择文件">
          <el-upload action="##" :limit="1" :file-list="fileList" :before-upload='beforeFileUpload' :on-remove='removeFile' :on-exceed="handleExceed">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过20MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否包含列头">
          <el-switch v-model="uplodForm.colNameInclude"></el-switch>
        </el-form-item>
        <transition name="fade">
          <el-form-item label="列头所在行号" v-if="uplodForm.colNameInclude" prop="colNameLineIndex">
            <el-input v-model="uplodForm.colNameLineIndex"></el-input>
          </el-form-item>
        </transition>
        <el-form-item label="读取数据行号" prop="readLineIndex">
          <el-input v-model="uplodForm.readLineIndex"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadFileVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFile">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加对象配置" :visible.sync="addObjVisible">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content">
            <div class="title">对象</div>
            <div class="sw-grid-content">
              <el-tree :data="groupTree" :highlight-current="true" node-key="id" ref="businessTreeRef" @node-click="treeNodeClickHandler" :default-expand-all="true" :expand-on-click-node="false">
                <span slot-scope="{ node, data }">
                  <img :src="data.icon" alt="" style="width:16px;height:16px;">
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content">
            <div class="title">属性</div>
            <div class="sw-grid-content">
              <div class="property" v-for="property in propertyList" :key="property.propertyUri" @click="addRow(property)"><span v-show="property.representative == '1'">*</span>{{property.displayname}}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content">
            <div class="title">列</div>
            <div class="sw-grid-content">
              <div class="row-box" v-for="(row,index) in rowsList" :key="row.propertyUri">
                <div class="row-title">{{row.displayname}}<i class="el-icon-close" @click="deleteRow(index)"></i></div>
                <div class="row-select">
                  <div class="sel-classs" v-for="sel in row.selList" :key="sel.name">
                    <span>{{sel.name}}</span>
                    <el-select v-model="sel.value" placeholder="请选择">
                      <el-option key="" label="无" value="">
                      </el-option>
                      <el-option v-for="item in columns" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addObjVisible = false">取 消</el-button>
        <el-button type="primary" @click="addObj">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加关系配置" :visible.sync="addLinkVisible">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">关系主方</div>
            <div class="property" v-for="obj in objGroupList" :class={selected:obj.selected} @click="clickLinkOwn(obj)">{{obj.title}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">关系</div>
            <div class="property" v-for="link in linkList" :class={selected:link.selected} :key="link.linkUri" @click="clickLink(link)">{{link.linkDisplayName}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">关系对方</div>
            <div class="property" v-for="link in linkoppositeList" :class={selected:link.selected} :key="link.uri" @click="clickLinkopposite(link)">{{link.title}}</div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addLinkVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLink">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除关系配置" :visible.sync="delLinkVisible">
      <p>确定删除所选择的关系吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delLinkVisible = false">取 消</el-button>
        <el-button type="primary" @click="delLink">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@/utils'
import {uploadAndReadExcel, getLinksByObjectUri, saveTask, getObjectTreeWithUriList, getObjectPropertiesByUri} from '@/api/fileUpload'
export default {
    name: 'fileDataSource',
    data () {
        return {
            fileList: [],
            uploadFileVisible: false,
            uplodForm: {
                colNameInclude: true,
                colNameLineIndex: '',
                readLineIndex: '',
                file: ''
            },
            uploadRules: {
                colNameLineIndex: [
                    { required: true, message: '请输入列头所在行号', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '列头所在行号只能是数字' }
                ],
                readLineIndex: [
                    { required: true, message: '请输入读取数据行号', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '读取数据行号只能是数字' }
                ]
            },
            tableData: [],
            columns: [],
            objGroupList: [],
            linkTableData: {
                table: [],
                cache: []
            },
            addObjVisible: false,
            addLinkVisible: false,
            delLinkVisible: false,
            groupTree: [],
            propertyList: [],
            rowsList: [],
            linkList: [],
            linkoppositeList: [],
            delLinkRow: {},
            objectUri: '',
            saveTaskData: {
                id: '',
                run: false,
                taskname: '',
                filename: '',
                fileurl: '',
                readinfo: {
                    colNameInclude: '',
                    colNameLineIndex: null,
                    readLineIndex: null
                },
                mapper: {
                    objectsInfo: [],
                    linksInfo: []
                }
            }
        }
    },
    mounted () {},
    methods: {
        openUploadDialog () {
            this.uplodForm.file = ''
            this.uplodForm.colNameInclude = true
            this.uplodForm.colNameLineIndex = ''
            this.uplodForm.readLineIndex = ''
            this.fileList = []
            this.uploadFileVisible = true
            this.$nextTick(() => {
                this.$refs.form.clearValidate()
            })
        },
        beforeFileUpload (file) {
            console.log(file)
            this.uplodForm.file = file
            this.fileList = [
                {
                    name: file.name
                }
            ]
            const isLt2M = file.size / 1024 / 1024 < 20
            if (!isLt2M) {
                this.$message.error('文件不能超过 20MB!')
                this.uplodForm.file = ''
                this.fileList = []
            }
            const fileName = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
            console.log(fileName)
            if (fileName != 'xls' && fileName != 'xlsx') {
                this.$message.error('请上传xls/xlsx格式文件')
                this.uplodForm.file = ''
                this.fileList = []
            }
            // return false
        },
        removeFile (file, fileList) {
            this.uplodForm.file = ''
            this.fileList = []
        },
        handleExceed (file, fileList) {
            console.log(file)
            this.uplodForm.file = file[0]
            this.fileList = [{
                name: file[0].name
            }]
        },
        uploadFile () {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.uplodForm.file == '') {
                        this.$message.error('请上传文件')
                        return
                    }
                    let _postData = new FormData()
                    _postData.append('file', this.uplodForm.file)
                    _postData.append('readLineIndex', this.uplodForm.readLineIndex)
                    this.saveTaskData.readinfo.readLineIndex = this.uplodForm.readLineIndex
                    if (!this.uplodForm.colNameInclude) {
                        _postData.append('colNameInclude', false)
                        this.saveTaskData.readinfo.colNameInclude = 'false'
                        this.saveTaskData.readinfo.colNameLineIndex = 0
                    } else {
                        _postData.append('colNameInclude', true)
                        _postData.append(
                            'colNameLineIndex',
                            this.uplodForm.colNameLineIndex
                        )
                        this.saveTaskData.readinfo.colNameInclude = 'true'
                        this.saveTaskData.readinfo.colNameLineIndex = this.uplodForm.colNameLineIndex
                    }
                    this.uploadAndReadExcel(_postData)
                } else {
                    return false
                }
            })
        },
        openAddObjGroupDialog () {
            this.addObjVisible = true
            if (this.groupTree.length == 0) {
                this.getTree()
            }
            this.propertyList = []
            this.rowsList = []
        },
        treeNodeClickHandler (data) {
            this.objCnName = data.label
            this.objectUri = data.uri
            this.getPropertyList(data.uri)
            this.rowsList = []
        },
        addRow (data) {
            let _this = this
            let selList
            for (let item of _this.rowsList) {
                if (item.propertyUri === data.propertyUri) {
                    _this.$message.info('已经添加')
                    return
                }
            }
            switch (data.propertyType) {
            case 'TimeInterval':
                // 时间区间
                selList = [
                    { name: '开始时间字段：', key: 'beginDateColumn', value: '' },
                    { name: '结束时间字段：', key: 'endDateColumn', value: '' }
                ]
                this.$set(data, 'selList', selList)
                this.rowsList.push(data)
                break
            case 'GisData':
                // 地理位置
                selList = [
                    { name: '经度字段：', key: 'longitudeColumn', value: '' },
                    { name: '纬度字段：', key: 'latitudeColumn', value: '' },
                    { name: '地理字段：', key: 'propertyValueColumn', value: '' }
                ]
                this.$set(data, 'selList', selList)
                this.rowsList.push(data)
                break
            default:
                selList = [
                    { name: '对应字段：', key: 'propertyValueColumn', value: '' }
                ]
                this.$set(data, 'selList', selList)
                this.rowsList.push(data)
            }
        },
        deleteRow (index) {
            this.rowsList.splice(index, 1)
        },
        addObj () {
            let hasRepresentative = false
            for (let item of this.rowsList) {
                if (item.representative == '1') {
                    hasRepresentative = true
                    switch (item.propertyType) {
                    case 'TimeInterval':
                        if (item.selList[0].value == '' && item.selList[1].value == '') {
                            this.$message.error('代表属性映射字段不能为空')
                            return
                        }
                        break
                    case 'GisData':
                        // TODO
                        break
                    default:
                        if (item.selList[0].value == '') {
                            this.$message.error('代表属性映射字段不能为空')
                            return
                        }
                    }
                }
            }
            if (!hasRepresentative) {
                this.$message.error('没有代表属性')
                return
            }
            //
            this.objEnName = ''
            let objCnArr = []
            let tableData = []
            for (let item of this.rowsList) {
                // 拼接英文名
                if (item.representative == 1) {
                    let value = ''
                    for (let sel of item.selList) {
                        if (sel.value != '') {
                            value += sel.value
                        }
                    }
                    objCnArr.push(value)
                }
                let fieldValue = '' // 字段名
                for (let sel of item.selList) {
                    if (sel.value != '') {
                        fieldValue += sel.value + ','
                    }
                }
                fieldValue = fieldValue.slice(0, fieldValue.length - 1)
                let table = {
                    obj: this.objCnName,
                    property: item.displayname,
                    field: fieldValue
                }
                tableData.push(table)
            }
            this.objEnName = objCnArr.join(',')
            let obj = {}
            obj.originalData = this.rowsList
            obj.title = this.objCnName + `(${this.objEnName})`
            obj.tableData = tableData
            obj.enName = this.objEnName
            obj.uri = this.rowsList[0].uri
            obj.columns = [
                {
                    prop: 'obj',
                    label: '对象'
                },
                {
                    prop: 'property',
                    label: '属性'
                },
                {
                    prop: 'field',
                    label: '字段'
                }
            ]
            obj.selected = false
            // 判断是否重复配置
            for (let item of this.objGroupList) {
                let newOD = []
                let newPD = []
                for (let o of item.originalData) {
                    if (o.representative === '1') {
                        newOD.push(o)
                    }
                }
                for (let p of this.rowsList) {
                    if (p.representative === '1') {
                        newPD.push(p)
                    }
                }
                if (JSON.stringify(newOD) == JSON.stringify(newPD)) {
                    this.$message.error('代表属性映射字段重复')
                    return
                }
            }
            this.objGroupList.push(obj)
            this.addObjVisible = false
            let objectsInfoItem = {}
            objectsInfoItem.objectLogo = obj.title
            objectsInfoItem.objectUri = this.objectUri
            objectsInfoItem.objectMatchColumnInfo = []
            for (let item of this.rowsList) {
                switch (item.propertyType) {
                case 'TimeInterval':
                    // 起始时间和结束时间都不为空
                    if (item.selList[0].value != '' && item.selList[1].value != '') {
                        let objectMatchColumnInfoItem = {}
                        if (item.selList[0].value == '' || item.selList[1].value == '') {
                            let value = item.selList[1].value || item.selList[0].value
                            objectMatchColumnInfoItem = {
                                propertyInfo: {
                                    displayed: item.displayed,
                                    indexed: item.indexed,
                                    propertyUri: item.propertyUri,
                                    propertyType: item.propertyType,
                                    representative: item.representative,
                                    allowed: '1'
                                },
                                timeStart: value,
                                timeEnd: value
                            }
                            objectsInfoItem.objectMatchColumnInfo.push(
                                objectMatchColumnInfoItem
                            )
                        } else {
                            objectMatchColumnInfoItem = {
                                propertyInfo: {
                                    displayed: item.displayed,
                                    indexed: item.indexed,
                                    propertyUri: item.propertyUri,
                                    propertyType: item.propertyType,
                                    representative: item.representative,
                                    allowed: '1'
                                },
                                timeStart: item.selList[0].value,
                                timeEnd: item.selList[1].value
                            }
                            objectsInfoItem.objectMatchColumnInfo.push(
                                objectMatchColumnInfoItem
                            )
                        }
                    }
                    break
                case 'GisData':
                    let longitudeColumn, latitudeColumn, propertyValueColumn
                    for (let sel of item.selList) {
                        if (sel.key == 'longitudeColumn') {
                            longitudeColumn = sel.value
                        }
                        if (sel.key == 'latitudeColumn') {
                            latitudeColumn = sel.value
                        }
                        if (sel.key == 'propertyValueColumn') {
                            propertyValueColumn = sel.value
                        }
                    }
                    if (
                        (longitudeColumn != '' && latitudeColumn != '') ||
              propertyValueColumn != ''
                    ) {
                        let objectMatchColumnInfoItem = {}
                        objectMatchColumnInfoItem = {
                            propertyInfo: {
                                displayed: item.displayed,
                                indexed: item.indexed,
                                propertyUri: item.propertyUri,
                                propertyType: item.propertyType,
                                representative: item.representative,
                                allowed: '1'
                            },
                            address: propertyValueColumn,
                            latitude: latitudeColumn,
                            longitude: longitudeColumn
                        }
                        objectsInfoItem.objectMatchColumnInfo.push(
                            objectMatchColumnInfoItem
                        )
                    }
                    break
                default:
                    if (item.selList[0].value != '') {
                        let objectMatchColumnInfoItem = {}
                        objectMatchColumnInfoItem = {
                            propertyInfo: {
                                displayed: item.displayed,
                                indexed: item.indexed,
                                propertyUri: item.propertyUri,
                                propertyType: item.propertyType,
                                representative: item.representative,
                                allowed: '1'
                            },
                            value: item.selList[0].value
                        }
                        objectsInfoItem.objectMatchColumnInfo.push(
                            objectMatchColumnInfoItem
                        )
                    }
                    break
                }
            }
            this.saveTaskData.mapper.objectsInfo.push(objectsInfoItem)
        },
        deleteObj (obj, index) {
            let objstr = JSON.stringify(obj.originalData)
            if (this.linkTableData.cache.indexOf(objstr) > -1) {
                this.$message.error('已在关系配置里配置')
            } else {
                this.objGroupList.splice(index, 1)
                this.saveTaskData.mapper.objectsInfo.splice(index, 1)
            }
        },
        openAddLinkGroupDialog () {
            this.addLinkVisible = true
            this.linkList = []
            this.linkoppositeList = []
            this.objGroupList.forEach(item => {
                item.selected = false
            })
        },
        clickLink (data) {
            for (let item of this.linkList) {
                item.selected = false
            }
            data.selected = true
            this.linkoppositeList = []
            for (let obj of this.objGroupList) {
                for (let objLink of data.objects) {
                    if (
                        objLink.objectTargetUri === obj.uri &&
            obj.title != this.activeLineName
                    ) {
                        obj.selected = false
                        this.linkoppositeList.push(JSON.parse(JSON.stringify(obj)))
                    }
                }
            }
        },
        clickLinkopposite (data) {
            for (let item of this.linkoppositeList) {
                item.selected = false
            }
            data.selected = true
        },
        addLink () {
            let tableData = {}
            let objGroupListBool = false
            let linkoppositeListBool = false
            let linkListBool = false
            let linkParamStrItem1
            let linkParamStrItem2
            let linksInfoItem = {}
            for (let item of this.objGroupList) {
                if (item.selected) {
                    linkParamStrItem1 = item
                    linksInfoItem.objectSourceLogo = item.title
                    tableData.obj1 = item.title
                    objGroupListBool = true
                    break
                }
            }
            for (let item of this.linkoppositeList) {
                if (item.selected) {
                    linkParamStrItem2 = item
                    linksInfoItem.objectTargetLogo = item.title
                    tableData.obj2 = item.title
                    linkoppositeListBool = true
                    break
                }
            }
            for (let item of this.linkList) {
                if (item.selected) {
                    linksInfoItem.linkUri = item.linkUri
                    tableData.link = item.linkDisplayName
                    linkListBool = true
                    break
                }
            }
            if (!objGroupListBool || !linkoppositeListBool || !linkListBool) {
                this.$message.error('有属性未选择')
                return
            }
            for (let item of this.linkTableData.table) {
                if (JSON.stringify(item) === JSON.stringify(tableData)) {
                    this.$message.error('关系配置已存在')
                    return
                }
            }
            this.linkTableData.cache.push(
                JSON.stringify(linkParamStrItem1.originalData),
                JSON.stringify(linkParamStrItem2.originalData)
            )
            this.linkTableData.table.push(tableData)
            this.saveTaskData.mapper.linksInfo.push(linksInfoItem)
            this.addLinkVisible = false
        },
        uploadAndReadExcel (data) {
            uploadAndReadExcel(data).then(response => {
                this.uploadFileVisible = false
                if (response.status === 200) {
                    this.tableData = response.data.fileData.list
                    this.columns = []
                    for (let i in response.data.fileData.list[0]) {
                        this.columns.push(i)
                    }
                    this.saveTaskData.fileurl = response.data.fileUrl
                    this.saveTaskData.filename = response.data.fileName
                }
            })
        },
        clickLinkOwn (obj) {
            for (let item of this.objGroupList) {
                item.selected = false
            }
            obj.selected = true
            this.activeLineName = obj.title
            getLinksByObjectUri({objectUri: obj.uri}).then(response => {
                console.log(response)
                if (response.status == 200) {
                    this.linkList = response.data
                    for (let item of this.linkList) {
                        this.$set(item, 'selected', false)
                    }
                }
            })
        },
        exportfile () {
            if (this.saveTaskData.taskname == '') {
                this.$message.error('名称不能为空')
                return
            }
            if (this.objGroupList.length == 0) {
                this.$message.error('对象组不能为空')
                return
            }
            saveTask(this.saveTaskData).then(response => {
                this.$message(response.msg)
            })
        },
        getTree () {
            let _postData = {typeList: ['Entity', 'Event', 'Document', 'Media'].join(',')}
            getObjectTreeWithUriList(_postData).then(response => {
                response.data.forEach(function (item) {
                    if (!item.hasOwnProperty('icon')) {
                        item.icon = '../../static/tupian1.png'
                    }
                })
                this.groupTree = util.parseUriData(response.data)
                console.log(this.groupTree)
            })
        },
        openDelDialog (row) {
            this.delLinkRow = row
            this.delLinkVisible = true
        },
        delLink () {
            this.linkTableData.cache.splice(this.delLinkRow.$index * 2, 2)
            this.linkTableData.table.splice(this.delLinkRow.$index, 1)
            this.saveTaskData.mapper.linksInfo.splice(this.delLinkRow.$index, 1)
            this.delLinkVisible = false
            console.log(this.saveTaskData)
        },
        getPropertyList (uri) {
            getObjectPropertiesByUri({uri: uri}).then(response => {
                for (let i = 0; i < response.length; i++) {
                    let a = response[i]
                    a.uri = uri
                    if (a.representative == 1) {
                        response.splice(i, 1)
                        response.unshift(a)
                        continue
                    }
                }
                this.propertyList = response
            })
        }
    }
}
</script>
<style scoped>
.create-file{
    padding:20px;
    margin-bottom: 20px;
}
.fade-enter-active {
  transition: all 0.3s ease;
}
.fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  height: 40px;
}
.header {
  height: 40px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.header span {
  color: #1169c4;
  font-size: 20px;
  line-height: 30px;
}
.header .el-button {
  float: right;
  margin-left: 20px;
}
p.title {
  color: #1169c4;
  font-weight: bold;
line-height: 2.4;
}
p.title:before {
  content: "|";
  font-size: 20px;
  margin-right: 10px;
}
.grid-content .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
.title-group .title {
  float: left;
}
.title-group .el-button {
  margin-top: 10px;
  float: right;
}
.grid-content .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
.property {
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 5px;
}
.property:hover {
  color: #000;
}
.property span {
  color: red;
  margin-right: 5px;
}
.row-box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
.row-title {
  color: #66b1ff;
  font-weight: bold;
  background-color: #f6f6f6;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  font-size: 16px;
}
.row-select {
  padding: 10px;
  text-align: center;
}
.el-icon-close {
  float: right;
  color: #333;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.objGroup {
  clear: both;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
.objGroup .title {
  color: #66b1ff;
  font-weight: bold;
  background-color: #f6f6f6;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  font-size: 16px;
  width: 100%;
}
.selected {
  background-color: #b0d7ff;
}
.exportPIM {
  float: right;
  clear: both;
  margin-top: 20px;
  margin-bottom: 20px;
}
.sel-classs {
  margin-bottom: 10px;
}
.sw-grid-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 5px;
}
/*webkit内核滚动条样式*/

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #fff;
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(170, 170, 170, 1);
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(170, 170, 170, 1);
}
</style>
